<template>
    <div class='root'>
        <div class='head-bg' :style='shopHeadList.image_path|bgBlurFormat'></div>
        <div class='header'>
            <span class='fa fa-chevron-left nav-btn' @click='goBackClick'></span>
            <div class='shop-header-main' @click='skipShopDetial'>
                <img :src="shopHeadList.image_path|imgFormat" alt="">
                <div class="shop-header-content">
                    <h2>{{shopHeadList.name}}</h2>
                    <p>
                        <span>{{delivery}}</span>
                        <span>{{shopHeadList.order_lead_time}}分钟送达/</span>
                        <span>配送费￥{{shopHeadList.float_delivery_fee}}</span>
                    </p>
                    <span>公告： 用餐高峰期请提前下单，谢谢。</span>
                </div>
                <span class='fa fa-chevron-right right-arrow'></span>
            </div>
            <br>
            <div class='shop-header-activites' v-if='shopHeadList.activities' @click='showDiologView'>
                <span>
                    <span class='new-user'>{{shopHeadList.activities[0].icon_name}}</span>
                <span>{{shopHeadList.activities[0].description}}</span>
                </span>
                <span class='activite-num'>{{shopHeadList.activities.length}}个活动</span>
            </div>
        </div>
        <div class='shop-tab-container'>
            <div class='shop-tab-goods'>
                <span v-on:click='showShop' :class='isShow?"tab-active":""'>商品</span>
            </div>
            <div class="shop-tab-evaluate">
                <span v-on:click='showEvaluate' :class='isShow?"":"tab-active"'>评价</span>
            </div>
        </div>

        <main :style='isShow?"display:block":"display:none"'>
            <div class='shop-sort-menu'>
                <div class='shop-sort-list'>
                    <ul ref='menuList'>
                        <li v-for='(item,i) in shopDetailList' :data-menu='i'>
                            <span @mousedown='downHandle' @mouseout='outHandle' @click='skipMenuClick(i)'>{{item.name}}</span>
                        </li>
                    </ul>
                </div>
                <div class='shop-sort-content' @scroll='scrollMenu' ref='menuContent'>
                    <template v-for='(item,i) in shopDetailList'>
                        <dl ref='menuItem' :data-index='i'>
                            <dt>
                                <div class="categroy-title">
                                    <strong>{{item.name}}</strong>
                                    <span v-if='item.description'>{{item.description}}</span>
                                </div>
                                <div class="categroy-more"  @click='showTipView' style='position: relative;'>
                                    <span >...</span>
                                    <!--v-show='showTip'-->
                                    <span 
                                    style='position:absolute;top: 20px;right:1px;width: 180px;height: 30px;padding-right:100px;background-color:#363636;color: #fff;line-height: 30px;border-radius: 5px;display: none'
                                    >{{item.name}}</span>
                                </div>
                                
                            </dt>
                            <dd v-for="i in item.foods">
                                <div class='food-icon'>
                                    <img :src="i.image_path|imgFormat" alt="">
                                </div>
                                <div class='food-detail'>
                                    <p>
                                        <span class='food-name'> {{i.name}} </span>
                                        <span class='food-sign'>
                                        <span v-for='attr in i.attributes'>{{attr.icon_name}} </span>
                                        </span>
                                    </p>
                                    <p style='color:"#999";font-size: 1px;'>{{i.description}}</p>
                                    <p>{{i.tips|tipsFormat}} 好评率{{i.satisfy_rate}}%</p>
                                    <p class='count-car-number'>
                                        <b style='color:#f60'>￥{{i.specfoods[0].price}}</b>
                                        <!--添加减少货物组件-->
                                        <Number :data-foodid='i.item_id' @addFood='addFood'></Number>
                                        <!--小圆-->
                                    </p>
                                </div>
                            </dd>
                        </dl>
                    </template>
                </div>
            </div>
            <div class='cart-view'>
                <div class='left-side'>
                    <div class='car-box'>
                        <span class="fa fa-shopping-cart  shopping-cart" ref='shopCart'></span>
                    </div>
                    <badge text="8"></badge>
                    <span>￥0</span>
                    <span>配送费￥{{shopHeadList.float_delivery_fee}}</span>
                </div>
                <div class='right-side'>
                    <span> ￥{{shopHeadList.float_minimum_order_amount}}起送</span>
                </div>
            </div>
            <!--<footer>
                <span>商家休息中，暂不接单</span>
            </footer>-->
        </main>

        <!--评论组件-->
        <Commond :style='isShow?"display:none":"display:block"' :allScore='allScore' :totalCom='totalCom' class='commond-box' @getComList='getComList' :allCommondList='allCommondList' 
        @reqMoreCom='getComList'
        ></Commond>

        <!--活动弹出层-->
        <transition name='fade'>
            <MyDialog v-show="showDialog" @close='closeDialog' :shopHeadList='shopHeadList' ></MyDialog>
        </transition>
        
    </div>

</template>
<script>
    import bus from '../util/bus.js'
    import Commond from '../components/Commond' 
    import Number from '../components/Number' 
    import MyDialog from '../components/Dialog'
    import { Badge } from 'vux'
    import $ from 'jquery'

    export default {
        data: function () {
            return {
                shopHeadList: {},
                shopDetailList: [],
                isClick: false,
                isShow: true,
                isScroll: false,
                showDialog:false,
                isShowTip:true,
                allCommondList:{},
                totalCom:[],
                allScore:{},
                isLoading:false,
                menuContentHeight: [],
            }
        },
        components: {
            Commond,
            MyDialog,
            Number,
            Badge
        },
        mounted: function () {
            this.reqShopHeader()
            this.reqShopDetail()
            this.reqAllCommond()
            this.reqTotalCate()
        },
        computed: {
            delivery: function () {
                if (!this.shopHeadList.delivery_mode) {
                    return
                }
                return this.shopHeadList.delivery_mode.text + '/'
            }
        },
        methods: {
            goBackClick: function () {
                window.history.go(-1)
            },
            downHandle: function (e) {
                e.target.parentNode.classList.add('categroy-item')
            },
            outHandle: function (e) {
                e.target.parentNode.classList.remove('categroy-item')
            },
            showShop: function () {
                this.isShow = true
            },
            showEvaluate: function () {
                this.isShow = false
            },
            /*显示弹出层*/
            showDiologView: function () {
                this.showDialog = true
            },
            closeDialog:function(){
                this.showDialog = false
            },
            /*显示提示层*/
            showTipView:function(e){
                if(this.isShowTip){
                    // 更改为动态的得到标签更好
                    e.target.parentNode.childNodes[2].style.display = 'block'
                    this.isShowTip = false
                }else{
                    e.target.parentNode.childNodes[2].style.display = 'none'
                    this.isShowTip = true
                }
            },
            /*增加到购物车*/
            addFood:function(e){
                
                /*小圆点动画*/
                var dot = $('<div class="dot"></div>').css({
                                left:event.pageX - 10,
                                top:event.pageY - 10
                            }).appendTo('body')
                            .animate({
                                left:60
                            },600)
                
                dot.animate({
                    top:event.pageY - 80
                },200)
                .animate({
                    top:560
                },400,function(){
                    dot.remove()
                    this.$refs.shopCart.style.backgroundColor = '#3190E8'
                    $(this.$refs.shopCart).animate({
                        padding:8
                    },100)
                    .animate({
                        padding:14,
                    },100)
                    .animate({
                        padding:12,
                    },100)
                }.bind(this))
                dot.dequeue()
            },
            /*获取高度数据*/
            getHeight: function () {
                var resHeight = 0
                this.menuContentHeight.push(resHeight)
                for (var i = 0; i < this.$refs.menuContent.childNodes.length - 1; i++) {
                    resHeight += this.$refs.menuContent.childNodes[i].clientHeight
                    this.menuContentHeight.push(resHeight)
                }
                this.isScroll = true
            },
            /*菜单列表点击事件*/
            skipMenuClick: function (index) {
                var offH = this.$refs.menuContent.scrollTop
                var cliH = this.$refs.menuItem[index].clientHeight
                if (index == 0) {
                    this.$refs.menuContent.scrollTop = 0
                } else {
                    var resH = 0;
                    for (var i = 1; i <= index; i++) {
                        resH += this.$refs.menuItem[i - 1].clientHeight
                    }
                    // jquery动画
                    $(this.$refs.menuContent).animate({
                        scrollTop:resH
                    },700)
                }
            },
            /*菜单内容滚动事件*/
            scrollMenu: function (e) {
                var offsetHeight = e.target.scrollTop
                if (!this.isScroll) {
                    this.getHeight()
                }
                for (var i = 0; i < this.menuContentHeight.length; i++) {
                    if (offsetHeight >= this.menuContentHeight[i]) {
                        if(i>0){
                            this.$refs.menuList.childNodes[i-1].classList.remove('categroy-item')
                        }   
                        this.$refs.menuList.childNodes[i].classList.add('categroy-item')
                    } else {
                        this.$refs.menuList.childNodes[i].classList.remove('categroy-item')
                    }
                }
            },
            // 请求商店头信息
            reqShopHeader: function () {
                this.$axios.get('ele/shopping/restaurant/' + this.$route.params.id, {
                    params: {
                        "extras": ["activities", "albums", "license", "identification"],
                        latitude: bus.latitude,
                        longitude: bus.longitude,
                    }
                })
                    .then(res => {
                        this.shopHeadList = res.data
                    })
            },
            // 请求商店商品详细信息
            reqShopDetail: function () {
                this.$axios.get('ele/shopping/v2/menu', {
                    params: {
                        restaurant_id: this.$route.params.id
                    }
                })
                    .then(res => {
                        this.shopDetailList = res.data

                    })
            },
            
            // 请求总和评价
            reqAllCommond:function(){
                this.$axios.get('ele/ugc/v2/restaurants/'+this.$route.params.id+'/ratings/scores') 
                .then(res=>{
                    this.allScore = res.data
                })   
            },
            // 请求评价分类
            reqTotalCate:function(){
                this.$axios.get('ele/ugc/v2/restaurants/'+this.$route.params.id+'/ratings/tags')
                .then(res=>{
                    this.totalCom = res.data
                })
            },
            // 请求评价列表
            reqComList:function(e){
                this.isLoading = true
                this.$axios.get('ele/ugc/v2/restaurants/'+this.$route.params.id+'/ratings',{
                    params:{
                        has_content:true,
                        tag_name:e,
                        offset:this.allCommondList.length,
                        limit:10,
                    }
                })
                .then(res=>{
                    this.allCommondList = res.data
                    this.isLoading = false
                    
                })
            },
            // 响应子组件发射事件---得到评论列表
            getComList:function(e){
                // if(this.isLoading){
                //     return 
                // }
                this.reqComList(e)
                
            },
            skipShopDetial: function () {
                window.location.href = '#/home/shop/' + this.shopHeadList.id
            },
            
        }
    }

</script>
<style scoped>
    .root {
        height: 100vh;
        position: absolute;
    }
    
    .head-bg {
        z-index: -1;
        width: 100%;
        height: 134px;
        background-repeat: no-repeat;
        position: absolute;
        top: 0;
        left: 0;
        background-size: cover;
        background-repeat: no-repeat;
    }
    
    .head-bg::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: rgba(119, 103, 137, .43);
    }
    
    .header {
        width: 100%;
        /*background-color: #999;*/
        color: #fff;
    }
    
    .nav-btn {
        padding: 8px;
        font-size: 2rem;
    }
    /*商家头部*/
    
    .shop-header-main {
        display: flex;
        justify-content: space-between;
    }
    
    .shop-header-main img {
        margin: 0 1rem;
        width: 66px;
        height: 66px;
    }
    
    .shop-header-content {
        width: 23rem;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
    
    .shop-header-content h2 {
        margin: 0;
        font-size: 1.8rem;
    }
    
    .shop-header-main .right-arrow {
        line-height: 50px;
        padding-right: 1rem;
    }
    
    .shop-header-activites {
        display: flex;
        justify-content: space-between;
        padding: 0 1rem 0.5rem 1rem;
        font-size: 5px;
    }
    
    .shop-tab-container {
        width: 100%;
        display: flex;
        padding: 1.2rem 0;
        border-bottom: 1px solid #eee;
    }
    
    .shop-tab-container .shop-tab-goods,
    .shop-tab-evaluate {
        width: 50%;
        text-align: center;
        font-size: 1.4rem;
    }
    /*商品评价选中时的效果*/
    
    .tab-active {
        color: #2395ff;
        border-bottom: 2px solid #2395ff;
    }
    /*分类*/
    
    .shop-sort-menu {
        display: flex;
    }
    /*分类列表*/
    
    .shop-sort-list,
    .shop-sort-content {
        height: calc(100vh - 180px - 52px);
        overflow: scroll;
        text-align: center;
        color: #666;
        font-size: 1.4rem;
        background-color: #f8f8f8;
    }
    
    .shop-sort-list {
        width: 100px;
        white-space: wrap;
    }
    
    .shop-sort-list li {
        padding: 15px;
        border-bottom: 1px solid #ededed;
    }
    /*食物列表选中的效果*/
    
    .categroy-item {
        border-left: 3px solid #2395ff;
        background-color: #fff;
    }
    /*分类内容*/
    
    .shop-sort-content {
        width: calc(100vw - 100px)
    }
    
    .shop-sort-content dt,
    .shop-sort-content dd {
        display: flex;
        justify-content: space-between;
        padding: 1rem;
    }
    
    .shop-sort-content dd {
        background-color: #fff;
        border-bottom: 1px solid #ededed;
    }
    
    .shop-sort-content .categroy-title span {
        font-size: .266667rem;
        color: #999;
        white-space: nowrap;
        overflow: hidden;
    }
    
    .add-goods {
        font-size: 20px;
        color: #2395ff;
    }
    /*食物详情*/
    
    dd .food-icon {
        width: 50px;
        height: 50px;
    }
    
    dd .food-icon img {
        width: 100%;
        height: 100%;
    }
    
    dd .food-detail {
        width: calc(100% - 60px);
        text-align: left;
    }
    
    .food-detail .food-name {
        color: #555;
        font-size: 1.6rem;
        font-weight: 700;
    }
    
    .food-detail .food-sign {
        font-size: .213333rem;
        text-align: center;
        float: right;
        color: rgb(236, 156, 104);
    }
    
    .food-detail .food-sign span {
        border: 1px solid rgb(236, 156, 104);
        margin-right: 5px;
    }
    
    .food-detail>p {
        padding: 0.2rem;
    }
    /*购物车计数*/
    .count-car-number{
        display: flex;
        justify-content: space-between;
        line-height: 20px;
        font-size: 20px;
        position: relative;
    }
    footer,
    .cart-view {
        z-index: 10;
        width: 100%;
        height: 52px;
        line-height: 52px;
        text-align: center;
        position: fixed;
        bottom: 0px;
        color: #ccc;
        font-size: 1.8rem;
        background-color: rgba(0, 0, 0, .7);
    }
    /*购物车*/
    
    .cart-view {
        display: flex;
        justify-content: space-between;
        color: #fff;
    }
    
    .cart-view .left-side {
        width: 70%;
        background-color: #363636;
        padding: 0 10px;
    }
    
    .cart-view .right-side {
        width: 30%;
        padding: 0 10px;
        background-color: #535356;
    }
    
    .car-box{
        width: 60px;
        height: 60px;
        display: inline-block;
    }

    .shopping-cart {
        padding: 1rem;
        font-size: 2.4rem;
        position: relative;
        bottom: 20px;
        border: 4px solid #535356;
        background-color: #363636;
        border-radius: 50%;
    }
    .commond-box{
        height: calc(100vh - 180px);
        overflow: scroll;
        background-color: #fff;
    }
    .new-user {
        background-color: rgb(112, 188, 70)
    }
    /*弹出层动画*/
    .fade-enter{
        opacity: 0.5;
    }
    .fade-enter-active{
        transition: all 0.3s linear;
    }
    .fade-leave-active{
        opacity: 0.5;
        transition: all 0.3s linear;
    }
</style>